<!-- 市场空间 -->
<template>
  <card :cardHeight="cardHeight" noMore noborder cardTitle="市场空间"
    ><Chart :optionData="option_column" style="height: 100%; padding-bottom: 10px"></Chart
  ></card>
</template>

<script>
import StatisticsMixins from '../StatisticsMixins';
import { priceFormat } from '@/utils/base';
import { mortgageapi } from '@/api/index.js';

export default {
  name: 'branceSpace',
  mixins: [StatisticsMixins],
  data() {
    return {
      option_column: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            console.log('paramshaha', params);
            //这里就是控制显示的样式
            let value = 0; // 养殖规模 (已抵押、未抵押)
            for (let i = 0, l = params.length; i < l; i++) {
              value += params[i].value;
            }
            // 提示框显示信息
            let relVal = `<div style="text-align:center">${
              params[0].axisValue
            }</div><span style="margin-left: 23px; font-size: 10px; font-weight: 400; color:#7E848A;">养殖规模:</span><span style="color:#06706C;font-weight: bold;font-size: 16px;margin-left: 6px;">${priceFormat(
              value
            )}头</span>`;
            for (let i = 0, l = params.length; i < l; i++) {
              relVal += `
				 <br/> <span style="margin-left: 9px; display:inline-block; border-radius: 50%; width:10px; height: 10px; background: ${
           params[i].color
         };"></span>
				 <span style="font-size: 10px; font-weight: 400; color:#7E848A;">${params[i].seriesName}:</span>
				 <span style="color:#06706C;font-weight: bold;font-size: 16px;margin-left: 6px;">${
           params[i].data ? priceFormat(params[i].data) : 0
         }头</span>
				`;
            }
            return relVal;
          },
        },
        legend: {
          left: 30,
          top: 0,
          itemWidth: 12,
          itemHeight: 12,
          icon: 'circle', // 圆形
          textStyle: {
            color: '#7E848A',
            fontSize: 12,
            fontWeight: 400,
          },
        },
        grid: {
          left: '3%', // 左边偏移
          right: '4%',
          bottom: '0%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: [],
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            name: '单位 (头)',
            type: 'value',
            nameTextStyle: {
              fontSize: 14,
              fontWeight: 800,
            },
            splitNumber: 3,
            minInterval: 1,
          },
        ],
        // 底部缩放条配置
        dataZoom: [
          {
            type: 'slider', //slider表示有滑动块的;inside表示内置的，直接在图表上划
            start: 0, //从缩放条的0位置开始
            end: 10, //从缩放条的一半位置结束
            bottom: 5, //缩放条显示在底部
            position: 'absolute',
            show: true, //显示缩放条
          },
        ],
        series: [
          {
            name: '已抵押牛数',
            type: 'bar',
            barWidth: 44, // 柱状宽度
            stack: 'farm', // 数据堆叠,同个类目轴上配置相同的stack值可进行堆叠
            data: [5, 20, 36, 10, 10, 20],
            itemStyle: {
              normal: {
                color: '#4AD1CC',
              },
            },
          },
          {
            name: '未抵押牛数',
            type: 'bar',
            stack: 'farm',
            barWidth: 44,
            data: [10, 22, 18, 35, 42, 40],
            itemStyle: {
              normal: {
                color: '#48A2FE',
              },
            },
          },
        ],
      },
    };
  },
  methods: {
    getInfo() {
      this.$postAction(mortgageapi.echartsUrl.findMarketSpace + '?orgId=' + this.globalOrgId).then((da) => {
        if (da.code == 1) {
          let list = da.data;
          let title = [],
            mortgageList = [],
            unMortgageList = [];
          for (var i = 0; i < list.length; i++) {
            title.push(list[i].farmName);
            mortgageList.push(list[i].pledgeCount	);
            unMortgageList.push(list[i].unPledgeCount	);
          }
          let option_column = { ...this.option_column };
          option_column.xAxis.data = [...title];
          option_column.series[0].data = mortgageList;
          option_column.series[1].data = unMortgageList;
          option_column.dataZoom[0].show = title.length > 10;
          if (option_column.dataZoom[0].show) {
            option_column.dataZoom[0].end = parseInt((10 * 100) / title.length);
            option_column.grid.bottom = '15%';
          } else {
            option_column.grid.bottom = 0;
            option_column.dataZoom[0].end = 100;
          }
          this.option_column = { ...option_column };
        }
      });
    },
  },
};
</script>
